<template>
	<view class="content">
		<up-swiper :list="list1" @change="change" @click="click"></up-swiper>
		<view class="list">
			<up-tabs @change="handleTabChange" :list="list2" lineColor='#FF581C' :scrollable='false'
				:activeStyle="activeTabStyle"></up-tabs>

			<view class="tbs" v-if="showSubTabs">
				<up-tabs :list="list3" :lineColor="`url(${lineBg}) 100% 100%`" :scrollable='false'
					:activeStyle="subTabActiveStyle"></up-tabs>
			</view>

			<!-- 工单内容 -->
			<view v-if="currentIndex === 0">
				<view class="order-item" v-for="item in orderList" :key="item.id">
					<view class="item-header">
						<text class="time-text">{{ item.time }}</text>
						<!-- <up-tag textSize='20rpx;' :text="item.status" borderColor="transparent" plain plainFill
							size="mini" type="warning"></up-tag> -->
						<view class="tagSelf">
							{{item.status}}
						</view>
						<view class="today-tag" v-if="item.isToday">
							<up-icon name="clock" color="#FF581C" size="30rpx"></up-icon>
							<text>今日上门</text>
						</view>
					</view>
					<view class="item-content">
						<view class="service-name">{{ item.serviceName }}</view>
						<view class="address-info">
							{{ item.address }}
							<up-icon name="map-fill" color="#FF581C" size="36rpx"></up-icon>
						</view>
					</view>
					<view class="action-btn">
						<up-button type="primary" color='#FF581C' shape="circle" text="立即上门"></up-button>
					</view>
				</view>
			</view>

			<!-- 投诉内容 -->
			<view v-if="currentIndex === 1" class="complaint-section">
				<view class="complaint-summary">
					本月{{ complaintStats.count }}单投诉：违约金￥{{ complaintStats.penalty }}，体验分扣{{ complaintStats.scoreDeduction }}
				</view>
				<view class="complaint-list">
					<view class="section-title">—— 本月待审核/定责投诉 ——</view>
					<view class="order-item" v-for="item in complaintList" :key="item.id">
						<view class="item-header">
							<!-- <up-tag :text="item.status" borderColor="transparent" plain plainFill size="mini"
								type="warning"></up-tag> -->
							<view class="tagSelf">
								{{item.status}}
							</view>
							<view class="time-text" style="margin-left: 15rpx;">{{ item.time }}</view>
						</view>
						<view class="item-content">
							<view class="service-name">{{ item.serviceName }}</view>
							<view class="address-info">{{ item.address }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 抢单池内容 -->
			<view v-if="currentIndex === 4" class="grab-section">
				<view class="order-item" v-for="item in grabList" :key="item.id">
					<view class="item-header">
						<text class="time-text">{{ item.time }}</text>
						<!-- <up-tag :text="item.status" plain plainFill borderColor="transparent" size="mini"
							type="warning"></up-tag> -->
						<view class="tagSelf">
							{{item.status}}
						</view>
						<view class="today-tag" v-if="item.isToday">
							<up-icon name="clock" color="#FF581C" size="30rpx"></up-icon>
							<text>今日上门</text>
						</view>
					</view>
					<view class="item-content">
						<view class="service-name">{{ item.serviceName }}</view>
						<view class="address-info">
							{{ item.address }}
							<up-icon name="map-fill" color="#FF581C" size="36rpx"></up-icon>
						</view>
					</view>
					<view class="action-btns">
						<up-button type="primary" style="margin-right: 15rpx;" plain color='#FF581C' shape="circle"
							text="拒单"></up-button>
						<up-button type="primary" style="margin-left: 15rpx;" color='#FF581C' shape="circle"
							text="抢单"></up-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed
	} from 'vue';

	// 轮播图数据
	const list1 = reactive([
		'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	]);

	// 主标签数据
	const list2 = reactive([{
			name: '工单(3)'
		},
		{
			name: '投诉(4)'
		},
		{
			name: '返修(2)'
		},
		{
			name: '可邀评(0)'
		},
		{
			name: '抢单池(0)'
		},
	]);

	// 子标签数据
	const list3 = reactive([{
			name: '进行中(3)'
		},
		{
			name: '今日上门(3)'
		},
		{
			name: '明日上门'
		},
		{
			name: '待审核'
		},
	]);

	// 样式对象
	const activeTabStyle = reactive({
		color: '#FF581C',
		fontWeight: 'bold',
	});

	const subTabActiveStyle = reactive({
		color: '#FF581C',
	});

	// 业务数据
	const currentIndex = ref(0);
	const lineBg = ref(''); // 可以设置实际的背景图片URL

	// 工单数据
	const orderList = reactive([{
			id: 1,
			time: '今日 11:30',
			status: '待上门',
			isToday: true,
			serviceName: '淋浴花洒拆卸/安装 ×1',
			address: '市中区南花园小区2号楼508室'
		},
		// 可以添加更多工单数据
	]);

	// 投诉数据
	const complaintStats = reactive({
		count: 7,
		penalty: '129.00',
		scoreDeduction: '49.0'
	});

	const complaintList = reactive([{
			id: 1,
			time: '10-15 11:30:40',
			status: '待上门',
			serviceName: '淋浴花洒拆卸/安装 ×1',
			address: '市中区南花园小区2号楼508室'
		},
		// 可以添加更多投诉数据
	]);

	// 抢单数据
	const grabList = reactive([{
			id: 1,
			time: '今日 11:30',
			status: '待上门',
			isToday: true,
			serviceName: '淋浴花洒拆卸/安装 ×1',
			address: '市中区南花园小区2号楼508室'
		},
		// 可以添加更多抢单数据
	]);

	// 方法
	const change = (e) => {
		// 轮播图切换逻辑
	};

	const handleTabChange = (e) => {
		currentIndex.value = e.index;
	};

	// 计算属性
	const showSubTabs = computed(() => {
		return currentIndex.value === 0 || currentIndex.value === 4;
	});
</script>

<style lang="scss" scoped>
	.tagSelf {
		width: 80rpx;
		height: 40rpx;
		background: #FAF2E1;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		font-size: 20rpx;
		text-align: center;
		line-height: 40rpx;
		color: #ff581c;
	}

	.content {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f8f0ed;
	}

	.list {
		flex: 1;
		background: radial-gradient(0% 0% at 0% 0%, #f7e7e2 0%, #f8f0ed 100%);
		padding-bottom: 20rpx;
	}

	.tbs {
		margin: 20rpx auto;
		width: 95%;
		height: 83rpx;
		background: radial-gradient(0% 0% at 0% 0%, #f0d3e5 0%, #f0ccbf 100%);
		border-radius: 16rpx;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		background: #ffffff;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		margin: 30rpx;
		padding: 20rpx;
	}

	.item-header {
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #e6e6e6;
	}

	.time-text {
		font-size: 26rpx;
		color: #989898;
		margin-right: 16rpx;
	}

	.today-tag {
		display: flex;
		align-items: center;
		margin-left: auto;

		text {
			margin-left: 8rpx;
			font-size: 26rpx;
			color: #ff581c;
		}
	}

	.item-content {
		padding: 20rpx 13rpx;
		font-size: 28rpx;
		color: #323232;
	}

	.service-name {
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.address-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.action-btn {
		padding: 10rpx 10rpx 36rpx;
	}

	.action-btns {
		display: flex;
		justify-content: space-around;
		padding: 15rpx 0 36rpx
	}

	.complaint-section {
		background: radial-gradient(0% 0% at 0% 0%, #f7e7e2 0%, #f8f0ed 100%);
	}

	.complaint-summary {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #ff591c;
		background: #ffdacc;
		margin: 30rpx;
		border-radius: 16rpx;
	}

	.complaint-list {
		background: radial-gradient(0% 0% at 0% 0%, #f7e7e2 0%, #f8f0ed 100%);
		padding-bottom: 20rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #ab9e9e;
		margin: 30rpx 0;
	}

	.grab-section {
		background: radial-gradient(0% 0% at 0% 0%, #f7e7e2 0%, #f8f0ed 100%);
		padding-bottom: 20rpx;
	}
</style>